<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>MEGA 2.0</title>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/dialogs.css" />
    <link rel="stylesheet" type="text/css" href="../css/buttons.css" />
    <link rel="stylesheet" type="text/css" href="../css/toast.css" />
    <link rel="stylesheet" type="text/css" href="../css/dropdowns.css" />
    <link rel="stylesheet" type="text/css" href="../css/settings.css" />
    <script type="text/javascript" src="../js/vendor/jquery.js"></script>
    <script type="text/javascript" src="../js/vendor/jquery.jscrollpane.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="stylesheet">
    <!--<script type="text/javascript" src="../js/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="../js/jquery.tokeninput.js"></script>-->
    <script type="text/javascript">

    </script>
</head>

<body id="bodyel">
    <div class="float-widget transfer-progress">
        <!-- add almost-overquota/overquota to banner -->
        <div class="banner transfer almost-overquota">
            <div class="delete-img icon"></div>
            <div class="background-cloud-img"></div>
            <div class="left-section circle-dashboard">
                <div class="quota-info-pct-txt">97%</div>
                <div class="quota-info-pr-txt">48 GB/50 GB</div>
                <div class="quota-info-pct-circle">
                    <div class="overlay"></div>
                        <ul>
                            <li class="nw-fm-chart0 right-c">
                                <p>
                                    <span></span>
                                </p>
                            </li>
                            <li class="nw-fm-chart0 left-c">
                                <p>
                                    <span></span>
                                </p>
                            </li>
                        </ul>
                </div>
            </div>
            <div class="right-section upgrade-block">
                <div class="head-title">Top up transfer quota</div>
                <div class="content-txt">Please upgrade account to continue download.</div>
                <!-- change button color to default-red-button when it is overquota -->
                <div class="default-orange-button button">Upgrade account</div>
            </div>
        </div>
        <!-- add collaspe/expand to transfer-progress-widget -->
        <div class="transfer-progress-widget expand">
            <div class="transfer-progress-head">
                <!-- add download/upload/error/complete/overquota/almost-overquota to transfer-progress-widget -->
                <div class="transfer-progress-type download complete">
                    <div class="status-indicator">
                        <div class="transfer-progress-icon overquota"></div>
                        <div class="transfer-progress-pct">100%</div>
                    </div>
                    <div class="transfer-progress-txt">completed</div>
                </div>
                <div class="transfer-progress-type upload error overquota">
                    <div class="status-indicator">
                        <div class="transfer-progress-icon overquota"></div>
                         <div class="transfer-progress-pct">83%</div>
                    </div>
                    <div class="transfer-progress-txt">over transfer quota</div>
                    <div class="transfer-progress-icon transfer-error-1"></div>
                </div>
                <div class="transfer-progress-type initial hidden">
                    <div class="transfer-progress-initial"></div>
                    <div class="transfer-progress-txt">initiating … </div>
                </div>
                <div class="transfer-control-panel">
                    <div class="transfer-progress-icon expand"></div>
                    <div class="transfer-progress-icon collapse"></div>
                    <div class="transfer-progress-icon close"></div>
                </div>
            </div>
            <div class="transfer-progress-widget-body">
                <!-- add progress/complete/error/inqueue/pause and upload/download to transfer-task-row -->
                <div class="transfer-task-row upload progress">
                    <span class="transfer-filetype-icon image"></span>
                    <div class="transfer-filetype-txt">example image name loooo oooo.png</div>
                    <div class="transfer-file-size">200 MB</div>
                    <div class="transfer-task-status">1.3 MB/s</div>
                    <div class="transfer-task-actions">
                        <i class="transfer-progress-icon pause">
                            <div class="tooltips">pause transfer</div>
                        </i>
                        <i class="transfer-progress-icon cancel">
                            <div class="tooltips">cancel transfer</div>
                        </i>
                    </div>
                    <div class="transfer-progress-bar">
                        <div class="transfer-progress-bar-pct"></div>
                    </div>
                </div>
                <div class="transfer-task-row download complete">
                    <span class="transfer-filetype-icon image"></span>
                    <div class="transfer-filetype-txt">example image name looooo.png</div>
                    <div class="transfer-file-size">200 MB</div>
                    <div class="transfer-task-status">Completed</div>
                    <div class="transfer-complete-actions">
                        <i class="transfer-progress-icon link">
                            <div class="tooltips">get link</div>
                        </i>
                        <i class="transfer-progress-icon cloud-folder">
                            <div class="tooltips">open cloud folder</div>
                        </i>
                    </div>
                    <div class="transfer-task-actions">
                        <i class="transfer-progress-icon cancel">
                            <div class="tooltips">clear completed</div>
                        </i>
                    </div>
                    <div class="transfer-progress-bar">
                        <div class="transfer-progress-bar-pct"></div>
                    </div>
                </div>
                <div class="transfer-task-row upload error">
                    <span class="transfer-filetype-icon image"></span>
                    <div class="transfer-filetype-txt">example image name loooo oooo.png</div>
                    <div class="transfer-file-size">1022.99 GB</div>
                    <div class="transfer-task-status">Download failed - retrying</div>
                    <div class="transfer-task-actions">
                        <i class="transfer-progress-icon cancel">
                            <div class="tooltips">cancel transfer</div>
                        </i>
                    </div>
                    <div class="transfer-progress-bar">
                        <div class="transfer-progress-bar-pct"></div>
                    </div>
                </div>
                <div class="transfer-task-row upload inqueue">
                    <span class="transfer-filetype-icon image"></span>
                    <div class="transfer-filetype-txt">example imaoo.png</div>
                    <div class="transfer-file-size">1022.99 GB</div>
                    <div class="transfer-task-status"> </div>
                    <div class="transfer-task-actions">
                        <i class="transfer-progress-icon cancel">
                            <div class="tooltips">cancel transfer</div>
                        </i>
                    </div>
                    <div class="transfer-progress-bar">
                        <!-- <div class="transfer-progress-bar-pct"></div> -->
                    </div>
                </div>
                <div class="transfer-task-row download paused">
                    <span class="transfer-filetype-icon image"></span>
                    <div class="transfer-filetype-txt">example image name loooo oooo.png</div>
                    <div class="transfer-file-size">999.99 MB</div>
                    <div class="transfer-task-status">Pause</div>
                    <div class="transfer-task-actions">
                        <i class="transfer-progress-icon restart">
                            <div class="tooltips">restart</div>
                        </i>
                        <i class="transfer-progress-icon cancel">
                            <div class="tooltips">cancel transfer</div>
                        </i>
                    </div>
                    <div class="transfer-progress-bar">
                        <div class="transfer-progress-bar-pct"></div>
                    </div>
                </div>
            </div>
        </div>



    </div>
</body>
</html>











